//自定义一个渐入溅出的动画图片组件
import React, { Component } from 'react';
import { Image, Animated } from 'react-native';

class AniImage extends Component{
  render() {
    const { styles, uri } = this.props;

    this.animatedValue = new Animated.Value(0);

    const imgAnimation = this.animatedValue.interpolate({
      //输入范围(0-100)
      inputRange: [0, 100],
      //输出范围(0-1)
      outputRange: [0, 1]
    });

    return (
      <Animated.Image
        onLoadEnd={() => {
          Animated.timing(this.animatedValue, {
            //最终希望的值是100 对应的是opacity
            toValue: 100,
            //需要500毫秒完成动画
            duration: 500,
            //启用一个驱动程序兼容
            useNativeDriver: true
          }).start();
        }}
        source={{ uri: uri }}
        style={[styles, {opacity: imgAnimation}]}
      />
    );
  }
}

export default AniImage;